<template>
	<view class="container orderDetail-container" @click="moreBoxShow=false">
		<view class="order-type">
			<view class="copy-orderno yuan-btn btn-warning" @click="copyOrder">复制订单号</view>
			<view class="order-top-info">
				<text class="type-title">订单编号:</text>
				<text class="type-info">{{pageData.orderNo}}</text>
			</view>
			<view class="order-top-info">
				<text class="type-title">下单时间:</text>
				<text class="type-info">{{createTime}}</text>
			</view>
			<view class="order-top-info">
				<text class="type-title">订单状态:</text>
				<text class="type-info c-success" v-if="pageData.status===4">订单已完成</text>
				<text class="type-info c-warning" v-else-if="pageData.status===1">等待买家付款</text>
				<text class="type-info c-primary" v-else-if="pageData.status===2">买家已付款，等待卖家发货</text>
				<text class="type-info c-primary" v-else-if="pageData.status===3">卖家已发货</text>

				<text class="type-info c-danger" v-else-if="pageData.status===5">
					<text v-if="pageData.refundApplyStatus===1">售后中,等待工作人员审核</text>
					<text v-else-if="pageData.refundApplyStatus===2">售后中,等待商品退回</text>
					<text v-else-if="pageData.refundApplyStatus===3">售后申请被驳回（原因：{{pageData.refundAuditRemark}}）</text>
					<text v-else-if="pageData.refundApplyStatus===4">待退货</text>
					<text v-else-if="pageData.refundApplyStatus===5">售后中,等待商品退回</text>
					<text class="c-success" v-else-if="pageData.refundApplyStatus===6">退款完成</text>
					<text v-else-if="pageData.refundApplyStatus===7">退款失败 （原因：{{pageData.refundRejectReason}}）</text>
				</text>

				<text class="type-info c-danger" v-else-if="pageData.status===6">已取消</text>
			</view>

			<view class="order-top-info" v-if="pageData.status===5">
				<text class="type-title">退货原因:</text>
				<text class="type-info c-danger">{{pageData.refundReason}}</text>
			</view>

			<view class="order-top-info" v-if="pageData.logisticsName">
				<text class="type-title">发货物流信息:</text>
				<text class="type-info c-success">{{pageData.logisticsName}} 运单号：{{pageData.logisticsId}}</text>
			</view>

			<view class="order-top-info" v-if="pageData.returnTrackingNumber">
				<text class="type-title">退货物流信息:</text>
				<text class="type-info c-success">{{pageData.returnTrackingNumber}}</text>
			</view>
		</view>
		<view class="pay-address">
			<view class="panel-title"><text class="iconfont c-primary" style="margin-right: 10rpx;">&#xe634;</text>收货信息
			</view>
			<view class="address-info">
				<view class="addr-top">{{pageData.userName}} {{pageData.phone}}</view>
				<view class="addr-mid">{{pageData.address}}</view>
				<!-- <view class="addr-bottom">张三 134****5648</view> -->
			</view>
		</view>
		<view class="detail-info">
			<view class="detail-info-list">
				<text class="detail-info-title">总计</text>
				<text style="font-weight: bold;">¥</text>
				<text style="font-weight: bold;">{{$toYuan(pageData.totalPrice)}}</text>
			</view>
			<view class="detail-info-list c-danger">
				<text class="detail-info-title">优惠</text>
				<text style="font-weight: bold;">减 ¥</text>
				<text style="font-weight: bold;">{{$toYuan(pageData.discountAmount)}}</text>

			</view>
			<view class="detail-info-list">
				<text class="detail-info-title">邮费</text>
				<text style="font-weight: bold;">¥</text>
				<text style="font-weight: bold;">{{$toYuan(pageData.freightPrice)}}</text>
			</view>
			<view class="detail-info-list">
				<text class="detail-info-title">实付款</text>
				<text style="font-weight: bold;">¥</text>
				<text style="font-weight: bold;">{{$toYuan(pageData.price)}}</text>
			</view>
		</view>
		<view class="goods-panel">
			<view class="panel-title">
				<text class="iconfont c-danger" style="margin-right: 10rpx;">&#xe6b1;</text>
				商品信息
			</view>
			<view class="goods-list" v-for="item in pageData.spuInfoS" :key="item.goodsId"
				@click.stop="jumpGoods(item)">
				<view class="shop-name">{{item.placeMerchant}}</view>
				<view class="goods-info">
					<image class="goods-img" :src="item.goodsPicUrl" mode="aspectFill"></image>
					<view style="flex-grow: 1;">
						<view class="goods-name">{{item.goodsName}}</view>
						<view class="goods-pricebox">
							<view style="margin: 20rpx 0;">
								<text class="goods-price">
									¥{{$toYuan(item.discountsBackMoney)}}
								</text>
								<text class="goods-old-price">
									¥{{$toYuan(item.price*item.quantity)}}
								</text>

							</view>

							<text class="goods-size">规格:{{item.specificationName}}</text>
						</view>
						<view class="goods-num">数量 x{{item.quantity}}</view>
					</view>
				</view>

			</view>


		</view>

		<view class="page-bottom">
			<view style="color: #666;font-size: 24rpx;padding: 20rpx;position: relative;"
				@click.stop="moreBoxShow=true">
				更多
				<view class="more-box" :class="moreBoxShow&&'more-box-show'">
					<view @click.stop="clickCancel()" v-if="pageData.status===1">取消订单</view>
					<view @click.stop="clickIndex">首页</view>
				</view>
			</view>
			<view style="flex-grow: 1;"></view>
			<view class="yuan-btn btn-success" v-if="pageData.status===1" @click="clickPay">继续付款</view>
			<view class="yuan-btn btn-success" v-if="pageData.status===3" @click="clickGet">确认收货</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"
	import { doPay, hideLoading, showLoading, showToast, toDecimalNum } from "../../common/util";
	import api from "../../common/api";
	import commonStore from "../../store/commonStore";
	const moreBoxShow = ref(false)
	let pageId = ''
	let createTime = ''
	onLoad((options) => {
		pageId = options.id;
		createTime = options.createTime
	})
	onMounted(async () => {
		getOrderDetail()
	})
	const pageData = ref<any>({})
	const getOrderDetail = async () => {
		showLoading()
		try {
			const res = await api.findOrderDetailsInfo(pageId)
			const data = res.data || {}
			const goodsList = data.spuInfoS
			let total = 0
			goodsList.forEach((item) => {
				total += toDecimalNum(item.price * item.quantity)
			})
			data.totalPrice = total
			pageData.value = data
		} finally {
			hideLoading()
		}
	}
	const clickCancel = () => {
		uni.showModal({
			title: '提示',
			content: '你确定要取消该订单吗？',
			confirmText: '确定',
			success: async (res) => {
				if (res.confirm) {
					showLoading()
					try {
						const res = await api.cancelOrder({
							orderNo: pageData.value.orderNo,
						})
						showToast('取消成功')
						getOrderDetail()
						commonStore.commit('addReload', 'orderList')
					} finally {
						hideLoading()
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const clickIndex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}

	const clickPay = async () => {
		doPay({ orderId: pageId, orderNo: pageData.value.orderNo }, () => {
			getOrderDetail()
		}, () => {
			getOrderDetail()
		})
	}
	const clickGet = () => {
		uni.showModal({
			title: '提示',
			content: '你确定要确认收货吗？',
			confirmText: '确定',
			success: async (res) => {
				if (res.confirm) {
					showLoading()
					try {
						const res = await api.affirmProfile({
							id: pageId,
						})
						showToast('确认收货成功')
						getOrderDetail()
						commonStore.commit('addReload', 'orderList')
					} finally {
						hideLoading()
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const jumpGoods = (goods) => {
		uni.navigateTo({ url: '/pages/category/goodsDetail?id=' + goods.goodsId })
	}
	const copyOrder = (e) => {
		wx.setClipboardData({
			data: pageData.value.orderNo,
			success: function (res) {
				showToast('复制成功')
			}
		})
	}
</script>

<style lang="scss">
	.orderDetail-container {
		padding: 20rpx;
		padding-bottom: 150rpx;

		.panel-title {
			font-size: 28rpx;
			margin-bottom: 20rpx;
			color: #333;
		}

		.order-type {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			position: relative;
			padding-top: 60rpx;
		}

		.copy-orderno {
			position: absolute;
			right: 5rpx;
			top: 5rpx;
			padding: 5rpx 10rpx;
			border-radius: 8rpx;
		}

		.order-top-info {
			margin-bottom: 10rpx;
		}

		.type-title {
			color: #888;
			font-size: 28rpx;
			margin-right: 20rpx;
		}

		.type-info {
			color: #333;
			font-size: 28rpx;
		}


		.pay-address {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}

		.add-address {
			width: 100%;
			text-align: center;
		}

		.address-info {
			flex-grow: 1;
		}

		.addr-top,
		.addr-bottom {
			font-size: 24rpx;
			color: #666;
		}

		.addr-bottom {
			text-align: right;
		}

		.addr-mid {
			font-size: 28rpx;
			color: #333;
			margin: 10rpx 0;
		}

		.goods-panel {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}

		.shop-name {
			font-size: 26rpx;
			color: #333;
			margin-bottom: 15rpx;
		}

		.goods-list {
			border-bottom: solid 1px #eee;
			padding: 20rpx 0;
		}

		.goods-info {

			display: flex;
			align-items: center;
		}

		.goods-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.goods-name {
			font-size: 30rpx;
			color: #333;
		}

		.goods-pricebox {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.goods-old-price {
			color: #666;
			font-size: 28rpx;
			text-decoration: line-through
		}

		.goods-price {
			font-size: 34rpx;
			color: #FF4F00;
			font-weight: bold;

		}

		.goods-size {
			font-size: 24rpx;
			color: #666;
		}

		.goods-num {
			font-size: 24rpx;
			color: #666;
		}

		.detail-info {
			margin-top: 20rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
		}

		.detail-info-list {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 10rpx;
		}

		.detail-info-title {
			color: #888;
			flex-grow: 1;
		}


		.page-bottom {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);

			.yuan-btn {
				height: 70rpx;
				width: 160rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
			}

			.more-box {
				position: absolute;
				background-color: #fff;
				box-shadow: 2px 2px 3px 1px rgba(100, 100, 100, 0.5);
				top: -100%;
				left: 50%;
				width: 150rpx;
				text-align: center;
				color: #333;
				padding: 15rpx;
				border-radius: 4rpx;
				transform: scale3d(0, 0, 0);
				transition: all 0.3s;
				line-height: 40rpx;
			}

			.more-box-show {
				transform: scale3d(1, 1, 1)
			}
		}

	}
</style>